<template>
  <!-- 仓储货品 -->
  <div>
    <el-row>
      <el-col :span="8">
        <el-select
          :disabled="readonly"
          v-model="limitType"
          :placeholder="$t('请选择')"
          @change="changeStatus"
          value-key="code"
        >
          <el-option
            v-for="item in statusList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="16" v-if="limitType == 2">
        <el-select
          v-model="checkedData"
          :disabled="readonly"
          filterable
          remote
          reserve-keyword
          :placeholder="$t('请输入编号或名称')"
          :remote-method="remoteMethod"
          @change="changeData"
          value-key="productCode"
        >
          <el-option
            v-for="item in options"
            :key="item.productCode"
            :label="item.productCode + item.productName"
            :value="item.productCode"
          >
          </el-option>
        </el-select>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import nonStandardService from '@/services/nonStandardService'
import eventBus from '@/assets/utils/eventBus.js'
export default {
  name: 'Goods',
  props: {
    detail: {
      type: Object,
      default: () => {
        return {}
      },
    },
    value: [Object, String, Number],
    disabled: Boolean,
    parameter: {
      type: Object,
      default: () => {
        return {}
      },
    },
    type: Number,
  },
  data() {
    return {
      statusList: [
        { value: 1, label: this.$t('不限') },
        { value: 2, label: this.$t('指定') },
      ],

      options: [],
      checkedData: null,
      limitType: 1,
      selectData: {},
      readonly: false,
    }
  },
  created() {
    this.readonly = Boolean(this.$route.query.readonly)
    if (this.value) {
      this.setData()
    }
    if (this.type == 1) {
      this.$emit('input', String(this.limitType))
    }
    eventBus.$on('changeValue', () => {
      if (this.limitType == 1) {
        this.$emit('input', String(this.limitType))
      }
    })
  },
  methods: {
    /**远程搜索货品数据 */
    remoteMethod(query) {
      nonStandardService
        .queryGoods({
          searchKeyword: query,
          isDivided: 1,
          pageNum: 1,
          pageSize: 10,
        })
        .then((res) => {
          if (res.code == 200) {
            this.options = res.data.list
          }
        })
    },
    setData() {
      this.selectData = JSON.parse(this.value).selectData
      this.options = [JSON.parse(this.value).selectData]
      this.checkedData = JSON.parse(this.value).checkedData
      this.limitType = JSON.parse(this.value).limitType
      localStorage.setItem('goodsType', this.limitType)
    },
    changeStatus(val) {
      this.checkedData = null
      this.selectData = {}
      if (val == 1) {
        this.$emit('input', String(val))
      } else {
        this.$emit('input', '')
        this.remoteMethod('')
      }
      localStorage.setItem('goodsType', val)
      /**状态改变，判断价格优先级 */
      eventBus.$emit('statusChange')
    },
    changeData(val) {
      this.selectData =
        (this.options && this.options.find((it) => it.productCode == val)) || {}
      this.$emit('input', this.checkedData)
    },
    getData() {
      return {
        value: this.selectData.productCode + this.selectData.productName,
        checkedData: this.checkedData,
        limitType: this.limitType,
        selectData: this.selectData,
      }
    },
  },
}
</script>
